<template>
    <div class="menus-box"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
        <div id="echartMap" class="role-right" style="height:300px;width:800px;">
        </div>
    </div>
</template>
<script>
import API from '@/api';
// import echarts from 'echarts'
import '../../assets/json/yunnan'

export default {
data: function() {
        return {
            yunnan: require('../../assets/json/yunnan.json')
        };
    },
    mounted() {
        this.ffp();
    },
    methods: {
        ffp(yunnan) {
            var echarts = require('echarts');
            var ff = require('../../assets/json/yunnan')
            // // 基于准备好的dom，初始化echarts实例
            var mapChart = echarts.init(document.getElementById('echartMap'));
            echarts.registerMap('cityMap',this.yunnan,{});
            mapChart.setOption({
                geo: {
                    map: 'cityMap',//地图类型为中国地图,要是世界那就是world,要是省市区：例如beijing、shanghai
                    itemStyle:{ // 定义样式
                    normal:{       // 普通状态下的样式
                        areaColor:'#6699CC',
                        borderColor: '#fff',
                    },
                    emphasis: {         // 高亮状态下的样式
                        areaColor: '#e9fbf1'
                    }
                    }
        
                },
                backgroundColor: '', //背景颜色
                // title: {
                //     text: '云南',
                //     subtext: 'yn',
                //     color: '#fff',
                //     // sublink: 'http://www.pm25.in',
                //     x:'center',
                // },
                //是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
                
                // 提示框，鼠标移入
                tooltip:{
                    show:true, //鼠标移入是否触发数据
                    trigger: 'item', //出发方式
                    formatter:'{b}-销售数量：{c}'
                },
                series:[{
                    name:'',//series名称
                    type:'scatter',//为散点类型
                    coordinateSystem: 'geo',// series坐标系类型
                   data:[
                            {name: '昆明', value: [102.712251,25.040609]},
                            {name: '曲靖', value: [103.797851,25.501557]}
                        ],
                    symbol:'pin',
                    symbolSize:[20,20]
                }],
                //配置地图的数据，并且显示
                // series:[
                //     {
                //         name:'地图',
                //         type: 'map',  //地图种类
                //         map: 'cityMap', //地图类型。
                //         data:[
                //             {name: '宜昌', value: [99.803808,24.805535]},
                //         ],
                //         itemStyle: { //地图区域的多边形 图形样式。
                //             emphasis:{ //高亮状态下的样试
                //                 label:{
                //                     show:true,
                //                 }
                //             }
                //         },
                //         zoom:1,//放大比例
                //         label: {  //图形上的文本标签，可用于说明图形的一些数据信息
                //             show:true,
                //         },
                //     },
                //     {
                //         type:'scatter',
                //         showEffectOn: 'render',//配置什么时候显示特效
                //         coordinateSystem:'geo',//该系列使用的坐标系
                //         symbolSize:10,//标记的大小
                //         data:[
                //             {name: '宜昌', value: [99.803808,24.805535]},
                //         ],
                //         zlevel:99999
                //     },
                // ],
            }),
            window.addEventListener('resize', () => {
                // 自动渲染echarts
                mapChart.resize();
            })
        }
    }
};
</script>
<style scoped>
.role-right img {
    width: 98%;
}

</style>